<template>
  <div>
    <el-row style="background-color: #34495e;opacity:0.85;">
      <el-col :offset="2" :span="20">
        <div class="dw-header-main">
          <el-row align="middle" justify="space-between" type="flex">
            <el-col :span="2">
              <a>
                <el-image :src="require('../../assets/logo.png')" style="height: 80px"></el-image>
              </a>
            </el-col>
            <el-col :span="2">
              <p style="color: #f6f6f6;font-family: 'STXihei',serif;font-size: 25px">问卷邢<sup>&reg</sup></p>
            </el-col>
            <el-col :span="16">
              <div style="padding-left: 60px;">
                <admin-nav-menu></admin-nav-menu>
              </div>
            </el-col>
            <el-col :span="4" style="text-align: right;">
              <div>
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                      {{ adminName }} <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="myAccount">我的账号</el-dropdown-item>
                    <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AdminNavMenu from "./AdminNavMenu";

export default {
  name: "AdminHeader",
  components: {
    'admin-nav-menu': AdminNavMenu
  },
  data() {
    return {
      adminName: 'admin'
    }
  },
  methods: {
    handleCommand: function (command) {
      if (command === 'logout') {
        this.$router.push('/login')
        window.sessionStorage.clear()
      } else if (command === 'myAccount') {
        this.$router.push('/admin/account')
      } else if (command === 'updatePwd') {
        this.$router.push('/admin/pwd')
      }
    }
  },
  created() {
    const data = JSON.parse(window.sessionStorage.getItem("data"))
    this.adminName = data.username
  }
}
</script>

<style scoped>
.dw-header-main {
  padding: 0;
}

.el-dropdown-link {
  color: white;
}

.m-logbg {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
